<template>
  <view class="search-result-container">
    <view v-if="loading" class="loading">加载中...</view>
    <view v-if="!loading && productList.length === 0" class="empty">暂无商品</view>
    <view v-else class="product-list">
      <view class="product-item" v-for="item in productList" :key="item.id" @click="goDetail(item)">
        <image :src="item.img_url || item.image || '/static/logo.png'" class="product-img" />
        <view class="product-info">
          <text class="product-title">{{ item.title }}</text>
          <text class="product-price">¥{{ item.sell_price }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { request } from '@/Requset/request'

const productList = ref([])
const loading = ref(true)

onMounted(() => {
  const pages = getCurrentPages()
  const query = pages[pages.length - 1]?.options || {}
  // 用原始 keyword，不要 encodeURIComponent
  const keyword = query.keyword ? decodeURIComponent(query.keyword) : ''
  console.log('keyword:', keyword)
  if (!keyword) {
    loading.value = false
    return
  }
  request({
    url: `api/search?keyword=${encodeURIComponent(keyword)}`
  }).then(res => {
    console.log('搜索接口返回:', res)
    if (Array.isArray(res.data)) {
      // 过滤时用未编码的中文关键词
      const kw = keyword.trim().replace(/\s+/g, '').toLowerCase()
      console.log('过滤关键词:', kw)
      res.data.forEach(item => {
        console.log('商品标题:', item.title.replace(/\s+/g, '').toLowerCase())
      })
      productList.value = res.data.filter(item =>
        item.title && item.title.replace(/\s+/g, '').toLowerCase().includes(kw)
      )
      console.log('过滤后商品数量:', productList.value.length)
    } else {
      productList.value = []
    }
  }).finally(() => {
    loading.value = false
  })
})

function goDetail(item) {
  uni.navigateTo({ url: `/pages/detail/detail?id=${item.id}` })
}
</script>

<style scoped>
.search-result-container {
  padding: 24rpx 10rpx;
  background: #f7f8fa;
  min-height: 100vh;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18rpx;
  justify-content: space-between;
}

.product-item {
  width: 48%;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 6rpx 24rpx rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 18rpx;
  transition: box-shadow 0.2s;
  padding: 0;
  overflow: hidden;
}

.product-item:active {
  box-shadow: 0 10rpx 32rpx rgba(0,0,0,0.12);
}

.product-img {
  width: 100%;
  height: 350rpx; /* 原来是240rpx，现在高两倍 */
  border-radius: 20rpx 20rpx 0 0;
  object-fit: cover;
  background: #f5f5f5;
  box-shadow: 0 2rpx 8rpx #eee;
  display: block;
}

.product-info {
  padding: 18rpx 14rpx 14rpx 14rpx;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.product-title {
  font-size: 25rpx;
  color: #222;
  font-weight: 600;
  margin-bottom: 4rpx;
  line-height: 1.3;
  word-break: break-all;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示2行，超出省略号 */
  -webkit-box-orient: vertical;
  padding-right: 10rpx;
  padding-left: 10rpx;
}

.product-price {
  font-size: 26rpx;
  color: #fa541c;
  font-weight: bold;
  margin-top: 2rpx;
  word-break: break-all;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loading, .empty {
  text-align: center;
  color: #bbb;
  margin-top: 60rpx;
  font-size: 30rpx;
}
</style>